<template>
  <view class="home-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="navbar-left">
          <text class="app-title">社交圈子</text>
        </view>
        <view class="navbar-right">
          <view class="search-btn" @click="handleSearch">
            <u-icon name="search" color="#ffffff" size="20"></u-icon>
          </view>
          <view class="message-btn" @click="handleMessage">
            <u-icon name="bell" color="#ffffff" size="20"></u-icon>
            <view class="message-badge" v-if="unreadCount > 0">
              <text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 导航标签 -->
    <view class="nav-tabs">
      <view class="tab-item" :class="{ active: currentTab === 'follow' }" @click="switchTab('follow')">
        <text class="tab-text">关注</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'hot' }" @click="switchTab('hot')">
        <text class="tab-text">热门</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'latest' }" @click="switchTab('latest')">
        <text class="tab-text">最新</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view
      class="main-content"
      scroll-y
      @scrolltolower="loadMore"
      lower-threshold="50"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >

      <!-- 未登录提示 - 仅在关注标签且未登录时显示 -->
      <view class="login-tip" v-if="currentTab === 'follow' && !isUserLoggedIn">
        <view class="tip-content">
          <u-icon name="account" color="#4facfe" size="40"></u-icon>
          <text class="tip-title">登录后查看关注动态</text>
          <text class="tip-desc">关注感兴趣的用户，获取个性化内容推荐</text>
          <button class="login-btn" @click="handleLoginClick">立即登录</button>
        </view>
      </view>

      <!-- 帖子列表 -->
      <view class="post-list">
        <!-- 普通用户帖子 -->
        <view
          class="post-item"
          v-for="item in postList"
          :key="item.id"
          @click="handlePostDetail(item)"
        >
          <!-- 用户信息 -->
          <view class="post-header">
            <view class="user-info">
              <u-avatar
                :src="item.userAvatar || '/static/images/default-avatar.png'"
                size="40"
              ></u-avatar>
              <view class="user-details">
                <text class="username">{{ item.username || '用户' + item.uid }}</text>
                <text class="post-time">{{ formatTime(item.create_time) }}</text>
              </view>
            </view>
            <view class="post-actions">
              <u-icon name="more-dot-fill" color="#999" size="20"></u-icon>
            </view>
          </view>

          <!-- 帖子内容 -->
          <view class="post-content">
            <text class="post-title" v-if="item.title">{{ item.title }}</text>
            <text class="post-text">{{ item.content }}</text>

            <!-- 图片展示 -->
            <view class="post-images" v-if="item.mediaList && item.mediaList.length > 0">
              <view
                class="image-grid"
                :class="'grid-' + Math.min(item.mediaList.length, 3)"
              >
                <image
                  v-for="(img, index) in item.mediaList.slice(0, 9)"
                  :key="index"
                  :src="img"
                  class="post-image"
                  mode="aspectFill"
                  @click.stop="previewImage(item.mediaList, index)"
                ></image>
              </view>
            </view>

            <!-- 位置信息 -->
            <view class="post-location" v-if="item.address">
              <u-icon name="map-pin" color="#999" size="14"></u-icon>
              <text class="location-text">{{ item.address }}</text>
            </view>
          </view>

          <!-- 互动区域 -->
          <view class="post-footer">
            <view class="interaction-stats">
              <text class="stat-text">{{ item.read_count || 0 }} 浏览</text>
            </view>
            <view class="interaction-buttons">
              <view class="interaction-btn" @click.stop="handleLike(item)">
                <u-icon
                  :name="item.isLiked ? 'heart-fill' : 'heart'"
                  :color="item.isLiked ? '#ff4757' : '#999'"
                  size="18"
                ></u-icon>
                <text class="btn-text">{{ item.likeCount || 0 }}</text>
              </view>
              <view class="interaction-btn" @click.stop="handleComment(item)">
                <u-icon name="chat" color="#999" size="18"></u-icon>
                <text class="btn-text">{{ item.commentCount || 0 }}</text>
              </view>
              <view class="interaction-btn" @click.stop="handleShare(item)">
                <u-icon name="share" color="#999" size="18"></u-icon>
                <text class="btn-text">{{ item.shareCount || 0 }}</text>
              </view>
              <view class="interaction-btn" @click.stop="handleCollect(item)">
                <u-icon
                  :name="item.isCollected ? 'star-fill' : 'star'"
                  :color="item.isCollected ? '#FFD700' : '#999'"
                  size="18"
                ></u-icon>
                <text class="btn-text">{{ item.collectCount || 0 }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <u-loading-icon v-if="loading" color="#4facfe" size="20"></u-loading-icon>
        <text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
      </view>

      <!-- 没有更多数据 -->
      <view class="no-more" v-if="!hasMore && postList.length > 0">
        <text class="no-more-text">没有更多内容了</text>
      </view>
    </scroll-view>


  </view>
</template>

<script>
import { requireLogin, isLoggedIn } from '@/utils/auth'
import categoryApi from '@/api/quanzi/category'
import {listRecommendPosts,listHotPosts, listPost,unlikePost,likePost} from '@/api/quanzi/post'
import platform from '@/utils/platform'
import share from '@/utils/share'
import notification from '@/utils/notification'

export default {
  data() {
    return {
      refreshing: false,
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
      isUserLoggedIn: false,
      unreadCount: 3,

      // 顶部导航
      currentTab: 'latest', // follow, hot, latest

      // 底部导航
      activeTab: 'home', // home, square, message, mine

      // 帖子列表数据
      postList: []
    }
  },

  onLoad() {
    this.initPage()
  },

  onShow() {
    this.checkUserLoginStatus()
    this.loadData()
  },

  onReady() {
    // 初始化推送通知
    this.initNotification()
  },

  methods: {
    // 检查用户登录状态
    checkUserLoginStatus() {
      this.isUserLoggedIn = isLoggedIn()
    },

    // 处理登录按钮点击
    handleLoginClick() {
      this.$tab.navigateTo('/pages/login')
    },

    // 初始化页面
    async initPage() {
      // 检查登录状态
      this.checkUserLoginStatus()

      // 平台特定初始化
      this.initPlatformSpecific()

      // 加载数据 - 无论是否登录都可以查看
      await this.loadPosts()
    },

    // 切换顶部标签
    switchTab(tab) {
      if (this.currentTab === tab) return

      this.currentTab = tab
      this.page = 1
      this.postList = []
      this.hasMore = true
      this.loadPosts()
    },

    // 切换底部导航
    switchBottomTab(tab) {
      if (tab === this.activeTab) return

      switch (tab) {
        case 'home':
          // 已在首页，刷新数据
          this.loadData()
          break
        case 'square':
          this.$tab.navigateTo('/pages/circles/index')
          return
        case 'message':
          if (this.isUserLoggedIn) {
            this.$tab.navigateTo('/pages/message/index')
          } else {
            this.showLoginTip('查看消息')
          }
          return
        case 'mine':
          if (this.isUserLoggedIn) {
            this.$tab.navigateTo('/pages/user/profile')
          } else {
            this.showLoginTip('查看个人资料')
          }
          return
      }

      this.activeTab = tab
    },

    // 显示登录提示
    showLoginTip(action = '此操作') {
      uni.showModal({
        title: '提示',
        content: `${action}需要登录，是否前往登录？`,
        success: (res) => {
          if (res.confirm) {
            this.$tab.navigateTo('/pages/login')
          }
        }
      })
    },

    // 平台特定初始化
    initPlatformSpecific() {
      const currentPlatform = platform.getPlatform()
      console.log('当前平台:', currentPlatform)
    },

    // 初始化推送通知
    async initNotification() {
      try {
        if (this.isUserLoggedIn) {
          await notification.initPush()
          notification.updateMessageBadge()
          uni.$on('pushMessageReceived', this.handlePushMessage)
        }
      } catch (error) {
        console.log('推送初始化失败:', error)
      }
    },

    // 处理推送消息
    handlePushMessage(message) {
      console.log('收到推送消息:', message)
      this.unreadCount = notification.getUnreadMessageCount()
    },

    // 加载数据
    async loadData() {
      this.refreshing = true
      this.page = 1
      this.postList = []
      await this.loadPosts()
      this.refreshing = false
    },

    // 下拉刷新
    async onRefresh() {
      console.log('触发下拉刷新')
      this.page = 1
      this.postList = []
      this.hasMore = true
      await this.loadPosts()
      this.refreshing = false
      uni.showToast({
        title: '刷新成功',
        icon: 'success',
        duration: 1500
      })
    },

    // 加载更多
    async loadMore() {
      debugger
      if (this.loading || !this.hasMore) return

      this.page++
      await this.loadPosts()
    },

    // 加载帖子列表
    async loadPosts() {
      if (this.loading) return

      this.loading = true

      try {
        let res

        // 根据当前标签页选择不同的接口
        if (this.currentTab === 'follow') {
          // 关注的人的帖子 - 需要登录才能查看
          if (!this.isUserLoggedIn) {
            this.postList = []
            this.hasMore = false
            this.loading = false
            return
          }
          res = await listRecommendPosts({
            page: this.page,
            pageSize: this.pageSize
          })
        } else if (this.currentTab === 'hot') {
          // 热门帖子
          res = await listHotPosts({
            page: this.page,
            pageSize: this.pageSize
          })
        } else {
          // 最新帖子 - 默认列表
          res = await listPost({
            page: this.page,
            pageSize: this.pageSize
          })
        }

        console.log('API响应:', res)

        if (res.code === 200) {
          let posts = []

          // 处理分页数据格式
          if (res.rows && Array.isArray(res.rows)) {
            posts = res.rows.map(item => this.formatPostData(item))
            // 判断是否还有更多数据
            this.hasMore = res.rows.length === this.pageSize && this.page < Math.ceil(res.total / this.pageSize)
          } else if (res.data && Array.isArray(res.data)) {
            posts = res.data.map(item => this.formatPostData(item))
            this.hasMore = posts.length === this.pageSize
          } else {
            posts = []
            this.hasMore = false
          }

          if (this.page === 1) {
            this.postList = posts
          } else {
            this.postList.push(...posts)
          }

          console.log('处理后的帖子列表:', this.postList)
        } else {
          this.showToast(res.msg || '加载失败', 'error')
          if (this.page === 1) {
            this.postList = []
          }
        }
      } catch (error) {
        console.error('加载帖子失败:', error)
        this.showToast('网络连接失败，请检查网络', 'error')
        if (this.page === 1) {
          this.postList = []
        }
      } finally {
        this.loading = false
      }
    },

    // 格式化帖子数据
    formatPostData(item) {
      // 处理媒体文件 - 数据库字段是 media
      let mediaList = []
      if (item.media) {
        try {
          if (typeof item.media === 'string') {
            // 如果是JSON字符串，解析它
            const parsed = JSON.parse(item.media)
            mediaList = Array.isArray(parsed) ? parsed : [parsed]
          } else if (Array.isArray(item.media)) {
            mediaList = item.media
          }
        } catch (e) {
          console.error('解析媒体文件失败:', e, item.media)
          // 如果解析失败，尝试按逗号分割
          if (typeof item.media === 'string' && item.media.includes(',')) {
            mediaList = item.media.split(',').filter(url => url.trim())
          } else if (typeof item.media === 'string' && item.media.trim()) {
            mediaList = [item.media.trim()]
          }
        }
      }

      // 处理用户信息 - 可能需要从关联的用户表获取
      const username = item.username || item.nickName || item.createBy || `用户${item.uid}`
      const userAvatar = item.avatar || item.userAvatar || '/static/images/default-avatar.png'

      return {
        id: item.id,
        uid: item.uid,
        username: username,
        userAvatar: userAvatar,
        title: item.title || '',
        content: item.content || '',
        mediaList: mediaList,
        address: item.address || '',
        create_time: item.createTime,
        read_count: item.read_count || 0,
        likeCount: item.likeCount || 0,
        commentCount: item.commentCount || 0,
        shareCount: item.shareCount || 0,
        collectCount: item.collectCount || 0,
        isLiked: item.isLiked || false,
        isCollected: item.isCollected || false,
        post_top: item.post_top || 0, // 置顶标识
        type: item.type || 1, // 帖子类型
        status: item.status || 0 // 帖子状态
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      const time = new Date(timeStr)
      const now = new Date()
      const diff = now - time

      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
      if (diff < 604800000) return Math.floor(diff / 86400000) + '天前'

      return time.toLocaleDateString()
    },

    // 事件处理方法
    handleSearch() {
      this.$tab.navigateTo('/pages/search/index')
    },

    handleMessage() {
      if (this.isUserLoggedIn) {
        this.$tab.navigateTo('/pages/message/index')
      } else {
        this.showLoginTip('查看消息')
      }
    },

    handlePublish() {
      if (this.isUserLoggedIn) {
        this.$tab.navigateTo('/pages/publish/index')
      } else {
        this.showLoginTip('发布动态')
      }
    },

    handlePostDetail(post) {
      this.$tab.navigateTo(`/pages/post/detail?id=${post.id}`)
    },

    async handleLike(post) {
      if (!this.isUserLoggedIn) {
        this.showLoginTip('点赞')
        return
      }

      try {
        let res
        if (post.isLiked) {
          // 取消点赞
          res = await unlikePost(post.id)
        } else {
          // 点赞
          res = await likePost(post.id)
        }

        if (res.code === 200) {
          post.isLiked = !post.isLiked
          post.likeCount += post.isLiked ? 1 : -1
          this.showToast(post.isLiked ? '点赞成功' : '取消点赞', 'success')
        } else {
          this.showToast(res.msg || '操作失败', 'error')
        }
      } catch (error) {
        console.error('点赞失败:', error)
        this.showToast('网络错误，请重试', 'error')
      }
    },

    handleComment(post) {
      if (this.isUserLoggedIn) {
        this.$tab.navigateTo(`/pages/post/detail?id=${post.id}&action=comment`)
      } else {
        this.showLoginTip('评论')
      }
    },

    async handleShare(post) {
      try {
        // 调用后台分享接口，增加分享数
        const res = await postApi.sharePost(post.id)
        if (res.code === 200) {
          post.shareCount = (post.shareCount || 0) + 1
        }

        // 平台适配的分享功能
        await share.sharePost(post)
      } catch (error) {
        console.error('分享失败:', error)
        this.showToast('分享功能暂不可用', 'error')
      }
    },

    async handleCollect(post) {
      if (!this.isUserLoggedIn) {
        this.showLoginTip('收藏')
        return
      }

      try {
        let res
        if (post.isCollected) {
          // 取消收藏
          res = await postApi.uncollectPost(post.id)
        } else {
          // 收藏
          res = await postApi.collectPost(post.id)
        }

        if (res.code === 200) {
          post.isCollected = !post.isCollected
          if (post.isCollected) {
            post.collectCount = (post.collectCount || 0) + 1
          } else {
            post.collectCount = Math.max(0, (post.collectCount || 0) - 1)
          }
          this.showToast(post.isCollected ? '收藏成功' : '取消收藏', 'success')
        } else {
          this.showToast(res.msg || '操作失败', 'error')
        }
      } catch (error) {
        console.error('收藏失败:', error)
        this.showToast('网络错误，请重试', 'error')
      }
    },

    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: current
      })
    },

    showToast(title, type = 'default') {
      // 使用 uView 2.0 的 toast 方法
      this.$u.toast(title)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';

/* 全局样式重置 */
page {
  background: $primary-gradient;
}

/* 主容器样式 */
.home-container {
  min-height: 100vh;
  background: $primary-gradient;
  position: relative;
}

/* 顶部导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 2px 20px rgba(79, 172, 254, 0.3);
}

.navbar-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  padding-top: var(--status-bar-height);
}

.navbar-left {
  .app-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-btn, .message-btn {
  position: relative;
  padding: 8px;
}

.message-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff4757;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
}

/* 导航标签 */
.nav-tabs {
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 主内容区域 */
.main-content {
  padding-top: calc(44px + var(--status-bar-height) + 60px); /* 顶部导航栏高度 + 状态栏高度 + 导航标签高度 */
  padding-bottom: 10px;
  height: calc(100vh - 4px - var(--status-bar-height)); /* 视口高度减去顶部导航栏高度和状态栏高度 */
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: 10px;
}

.tab-item {
  margin-right: 30px;
  position: relative;
  padding: 8px 0;
}

.tab-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #4facfe;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: #4facfe;
  border-radius: 3px;
}

/* 登录提示 */
.login-tip {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  margin: 20px 15px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tip-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tip-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 15px 0 8px;
}

.tip-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.login-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
}

/* 帖子列表 */
.post-list {
  padding: 0 15px;
}

.post-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.post-item.official {
  border: 2px solid rgba(79, 172, 254, 0.3);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(79, 172, 254, 0.1);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar-container {
  position: relative;
}

.user-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.user-badge.official {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.user-details {
  margin-left: 12px;
}

.username-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.user-desc {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.post-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.post-actions {
  display: flex;
  align-items: center;
}

.place-top {
  font-size: 12px;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  margin-right: 10px;
  font-weight: 600;
}

.post-content {
  margin-bottom: 15px;
}

.post-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
  line-height: 1.4;
}

.post-text {
  font-size: 15px;
  color: #34495e;
  line-height: 1.6;
  margin-bottom: 15px;
}

.post-links {
  background: rgba(102, 126, 234, 0.08);
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
}

.link-item {
  display: flex;
  margin-bottom: 8px;
}

.link-item:last-child {
  margin-bottom: 0;
}

.link-label {
  font-size: 14px;
  color: #666;
  margin-right: 5px;
}

.link-url {
  font-size: 14px;
  color: #667eea;
}

.post-images {
  margin: 15px 0;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.post-image {
  border-radius: 12px;
  margin: 4px;
}

.grid-1 .post-image {
  width: calc(100% - 8px);
  height: 200px;
}

.grid-2 .post-image {
  width: calc(50% - 8px);
  height: 150px;
}

.grid-3 .post-image {
  width: calc(33.33% - 8px);
  height: 100px;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.post-tag {
  font-size: 12px;
  color: #4facfe;
  background: rgba(79, 172, 254, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.post-tag.official-tag {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  font-weight: 600;
}

.post-location {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.location-text {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.interaction-stats {
  font-size: 12px;
  color: #999;
}

.interaction-buttons {
  display: flex;
  gap: 20px;
}

.interaction-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.btn-text, .btn-count {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
}

/* 加载更多 */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.load-text {
  font-size: 14px;
  color: #999;
  margin-left: 8px;
}

.no-more {
  text-align: center;
  padding: 20px 0;
}

.no-more-text {
  font-size: 14px;
  color: #999;
}

/* 底部导航栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tab-bar .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tab-bar .tab-text {
  font-size: 12px;
  color: #95a5a6;
  margin-top: 4px;
  transition: all 0.3s ease;
}

.tab-bar .tab-text.active {
  color: #4facfe;
  font-weight: 500;
}

.tab-item.publish {
  position: relative;
}

.publish-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}
</style>
